<template>
  <div class="personal-rc">
    <personal-swiper :swiperData="swiperData" />
    <recommend-song :recommentData="recommendSongData" title="推荐歌单" />
    <personal-mv title="独家放送" :personalMv="personalMv" />
    <new-music title="最新音乐" :musicData="newMusic" />
    <personal-mv title="最新mv" :personalMv="mvData" />
  </div>
</template>

<script>
import PersonalSwiper from './children/PersonalSwiper'
import RecommendSong from '@/components/content/RecommendSong'
import PersonalMv from './children/childrenMv'
import NewMusic from './children/NewMusic'

import { getBanner, getRecommendSong, getPersonalMv, getnewMusic, getMv } from '@/api/Personal.js'

export default {
  name: 'PersonalRc',
  components: {
    PersonalSwiper,
    RecommendSong,
    PersonalMv,
    NewMusic
  },
  data() {
    return {
      // 轮播图 图片
      swiperData: [],
      // 推荐歌单数据
      recommendSongData: [],
      // 独家放送
      personalMv: [],
      // 最新音乐
      newMusic: [],
      // 推荐mv
      mvData: []
    }
  },
  async created() {
    const { data: res } = await getBanner()
    const { data: response } = await getRecommendSong()
    const { data: mv } = await getPersonalMv()
    const { data: newMusic } = await getnewMusic()
    const { data: mvData } = await getMv()
    this.swiperData = res.banners
    this.recommendSongData = response.result
    this.personalMv = mv.result
    this.newMusic = newMusic.result
    this.mvData = mvData.result.splice(0, 3)
  }
}
</script>

<style lang="less" scoped>
</style>